<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>评论案例</title>

		<style>
			.spanClass {
				background-color: bisque;
				width: 100%;
				border: 1px dotted;
				padding: 10px;
			}
		</style>

		<script src="js/vue.js"></script>

	</head>

	<body>
		<div id="app">
			<saveview @fupdate="updateInfo"></saveview>
			<hr />
			<div v-for="item in list">
				<div class="spanClass">
					<h3>{{item.title}}</h3>
					<h5>{{item.info}}</h5>
				</div>
				<hr />
			</div>

		</div>

		<template id="saveview">

			<div>
				标题：<input type="text" v-model="plInfo.title" />
				<hr /> 内容：
				<input type="text" v-model="plInfo.info" />
				<hr />
				<button @click="save">发表</button>

			</div>

		</template>

		<script>
			function PlInfo(title, info) {
				this.title = title;
				this.info = info;
				this.date = new Date();
			}

			var vm = new Vue({
				el: "#app",
				data: {
					list: []
				},
				methods: {
					updateInfo(plInfo) {
						this.list.push(plInfo)
					}
				},
				components: {
					saveview: {
						template: "#saveview",
						data() {
							return {
								plInfo: new PlInfo("", ""),
							}
						},
						methods: {
							save() {
								this.$emit('fupdate', this.plInfo)
								this.plInfo = new PlInfo("", "");

							}
						}
					}
				},

			});
		</script>
	</body>

</html>